class Cloak {
  // ul.box元素
  box = null
  // ul中的所有div
  divs = null
  // ul中的所有span
  spans = null
  // span元素激活的定时器编号
  spanTimer = 0
  // 执行动态显示时间的定时器
  moveTimer = 0

  constructor(box) {
    this.box = document.querySelector(box)
    this.divs = this.box.querySelectorAll('div')
    this.spans = this.box.querySelectorAll('span')
    this.showTime()
    this.activeSpans()
  }

  // 使用箭头函数，保证函数内定义this指向实例对象
  activeSpans = () => {
    if (this.spanTimer) {
      clearInterval(this.spanTimer)
    }
    this.spanTimer = setInterval(() => {
      // 如果span的类名是空，就设置为激活状态
      if (!this.spans[0].className) {
        this.spans[0].className = 'active'
        this.spans[1].className = 'active'
      } else {
        this.spans[0].className = ''
        this.spans[1].className = ''
      }
    }, 500)
  }

  // 执行动态显示时间的函数
  showTime = () => {
    if (this.moveTimer) {
      clearInterval(this.moveTimer)
    }
    this.moveTimer = setInterval(() => {
      this.doShowTime()
    }, 1000)
  }

  // 显示时间
  doShowTime = () => {
    let time = this.getTimeString()
    for (let i = 0; i < time.length; i++) {
      // 如果当前div对应的bom对象属性t和系统时间对应的数字不相等，则开始移动div元素
      if (this.divs[i].t !== time[i]) {
        this.move(this.divs[i], time[i])
        this.divs[i].t = time[i]
      }
    }
  }

  // 执行图片的移动操作
  move = (div, n) => {
    // 获得当前的div中的img数组
    let imgs = div.getElementsByTagName('img')
    // div中的第2张图片
    imgs[1].src = './img/' + n + '.jpg'
    // 执行div的向上位移操作
    this.doMove(div, () => {
      imgs[0].src = './img/' + n + '.jpg'
      div.style.top = '0px'
    })
  }

  // div的向上位移操作
  doMove = (div, fn) => {
    // 声明div的top值
    let top = 0
    let moveTimer = setInterval(() => {
      top -= 10
      if (top <= -70) {
        top = -70
        clearInterval(moveTimer)
      }
      div.style.top = top + 'px'
      // 如果top=-70,fn是函数则执行函数fn
      top === -70 && this.isFunction(fn) ? fn() : ''
    }, 50)
  }

  // 判断是否是函数
  isFunction(fn) {
    return Object.prototype.toString.call(fn).slice(8, -1) === 'Function'
  }

  // 获得系统时间的字符串
  getTimeString = () => {
    let date = new Date()
    let h = (date.getHours() + '').padStart(2, '0')
    let m = (date.getMinutes() + '').padStart(2, '0')
    let s = (date.getSeconds() + '').padStart(2, '0')
    // 150627 15时06分27秒
    return h + m + s
  }
}
